﻿
@{
    Layout = null;
    var TempletId = ViewBag.TempletId;
}
<script src="~/Scripts/tableTree/TableTree4J.js"></script>
<link href="~/Content/Manger/tabletree4j.css" rel="stylesheet" />
<link href="~/Scripts/Bootstrap/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<script src="~/Scripts/Bootstrap/js/bootstrap-datepicker.js"></script>
<style>
    /*.tittle-bg {
        background-color: #E8F2F7;
    }*/

    .GridView tr td
    {
        word-break: keep-all; /* 不换行 */
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    }

    .modal-content
    {
        background: #f1f4f5;
    }

    .big-right
    {
        background: #f1f4f5;
    }

    #SourceNode
    {
        background: #FFFFFF;
        padding: 15px 30px 20px 20px;
    }

    #SourceNodeLeft
    {
        background: #f1f4f5;
    }

    .SourceNodeLeftChild
    {
        background: #FFFFFF;
    }

    .LeftChild1F
    {
        border-right: 1px solid #E5E5E5;
    }

    .border-buttom
    {
        border-bottom: 1px solid #E5E5E5;
    }

    .color-999999
    {
        color: #999999;
    }

    .click_a + .active
    {
        font-weight: 500;
        color: #444444;
    }

    .fr
    {
        float: right;
    }

    .NodeConfigLabel
    {
        min-width: 100px;
    }

    h1
    {
        margin: 0;
    }
</style>

<div>
    <h1>溯源节点配置</h1>
    <div id="SourceNode" class="container-fluid">
        <div id="SourceNodeLeft" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <h2 class="blue-500">溯源节点</h2>
            <div class="padding-bottom-50">
                <div id="SourceNodeLeft_">
                    <div class="SourceNodeLeftChild ">
                        <div class="border-buttom padding-10 ">
                            <ul class="margin-left-10 margin-right-10" id="NodeData" style="display:none;">
                                <li class="border-buttom padding-10">
                                    <div class="border-buttom padding-bottom-10 ">
                                        <span binding="{'text':'rownum'}"></span>
                                        <span class="padding-right-20">节点名称:</span>
                                        <span style="color:#999999" binding="{'text':'NodeName'}"></span>
                                        <span class="fr">
                                            <i class="glyphicon glyphicon-edit" binding="{'NodeId':'Id'}" onclick="$.MGJ.NodeConfig.Ajax_EditNode(this)"></i>
                                            <i class="glyphicon glyphicon-remove" binding="{'NodeId':'Id'}" onclick="$.MGJ.NodeConfig.Ajax_DeleteNode(this)"></i>
                                        </span>
                                    </div>

                                    <span class="padding-right-20">节点类型:</span>
                                    <span>
                                        <a class="click_a color-999999" binding="{'text':'Category','textHandle':$.MGJ.NodeConfig.getCategoryName}">原料节点</a>
                                    </span>
                                    <span class="padding-right-20">录入次数:</span>
                                    <span>
                                        <a class="click_a color-999999" binding="{'text':'EnterTimes','textHandle':$.MGJ.NodeConfig.getEnterTimes}">多次</a>
                                    </span>
                                </li>

                            </ul>
                        </div>


                    </div>
                </div>
                <footer style="position:absolute;bottom:10px;width:100%">
                    <a class="btn btn-success col-xs-5 col-sm-5 col-md-5 col-lg-5" onclick="$.MGJ.NodeConfig.Ajax_AddNode()">添加节点</a>
                    <a class="btn btn-success col-xs-5 col-sm-5 col-md-5 col-lg-5 margin-right-20 fr" onclick="$.MGJ.NodeConfig.Dialog_FromTemplet(@TempletId)">从模板添加</a>
                </footer>
                <div style="clear:both"></div>
            </div>
        </div>
        <div id="SourceNodeRight" class="col-xs-8 col-sm-8 col-md-8 col-lg-8 padding-bottom-50">
            <form method="post" id="Node_form">
                <input type="hidden" id="id" name="Id" value="0" />
                <input type="hidden" name="FlowID" id="FlowID" value="@TempletId" />
                <input type="hidden" name="NodeType" value="0"/>


                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <div class="row">
                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">节点名称:</div>
                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <input id="NodeName" class="form-control" name="NodeName" maxlength="20" type="text" value="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">节点类型:</div>
                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <select class="form-control" name="Category" id="Category">
                                    <option value="">--请选择--</option>
                                    <option value="0">原料节点</option>
                                    <option value="1">关键节点 </option>
                                    <option value="2">其它</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">录入限制:</div>
                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <div>
                                    <label class="NodeConfigLabel"><input type="radio" name="EnterTimes" value="0" />单次输入</label>
                                    <label class="NodeConfigLabel"><input type="radio" name="EnterTimes" value="1" />多次输入</label>
                                </div>
                                <p>选择单次输入将使单个产品批次仅允许录入一次该节点信息，通常使用在“播种”、“屠宰”、“进口”等仅发生一次节点上。</p>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">H5控制:</div>
                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <div>
                                    <label class="NodeConfigLabel"><input type="radio" name="IsH5" value="1" />显示</label>
                                    <label class="NodeConfigLabel"><input type="radio" name="IsH5" value="0" />隐藏</label>
                                </div>
                                <p>该节点的溯源信息将默认在H5中显示</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">操作权限:</div>
                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <div>
                                    <label class="NodeConfigLabel" style="width:100%"><input type="radio" name="Permission" value="0" />允许所有人修改</label>
                                    <label class="NodeConfigLabel" style="width:100%"><input type="radio" name="Permission" value="1" />只允许有权限的人修改</label>
                                </div>
                            </div>
                        </div>


                        <div class="row" id="Modifier">
                            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">操作员:</div>
                            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <select class="form-control" id="UserSelect" name="PermissionPerson"></select>
                            </div>
                        </div>



                        <div class="margin-top-10 padding-top-20 padding-bottom-20" style="border: 1px solid #f1f4f5;clear:both">
                            <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center AddContent">
                                <i class="glyphicon glyphicon-pencil font-size-20" style="display:block"></i>
                                增加文字
                                <input type="checkbox" class="AddContentInp" name="DisplayChe" value="0" />
                            </label>

                            <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center AddContent">
                                <i class="glyphicon glyphicon-picture font-size-20" style="display:block"></i>
                                增加图片
                                <input type="checkbox" class="AddContentInp" name="DisplayChe" value="1" />
                            </label>

                            <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center AddContent">
                                <i class="glyphicon glyphicon-facetime-video font-size-20" style="display:block"></i>
                                增加视频
                                <input type="checkbox" class="AddContentInp" name="DisplayChe" value="2" />
                            </label>
                            <div style="clear:both"></div>
                        </div>

                        <input type="hidden" name="Display" id="Display" value="" />
                        <div style="position: absolute; bottom: 10px; width: 100%" class="text-right">
                            <button class="btn btn-success" type="button" onclick="$.MGJ.NodeConfig.NodeInfoIniti()">取消编辑</button>
                      
                            <button class="btn btn-success" type="button" onclick="$.MGJ.NodeConfig.Ajax_NodeSave('@TempletId')">保存节点</button>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
</div>


<script>
    //目录
    $(function () {
        $.MGJ.NodeConfig.Ajax_GetTempletNodeList("@TempletId");
        $.MGJ.NodeConfig.GetUserListByEid();
    });

    $('input:radio[name="Permission"]').change(function (e) {
        var val = $(this).val();
        if (val == 1) {
            $("#Modifier").show();
        } else {
            $("#Modifier").hide();
        }
    });

    var ColspanNub = $(".table.table-hover.table-bordered").find("tr").children("td").length
    window.ProdcetNode_EmptyHtml = '<tr><td colspan="' + ColspanNub + '"><p class="no-result">该产品暂无节点数据....</p></td></tr>';

    //点击添加内容
    $(".AddContentInp").on("click", function () {
        $(this).parents(".AddContent").toggleClass("green-500")
    })

    //完成编辑
    function CompleteEdit() {
        var a=0;
        $("#SourceNodeRight").find("input[type='radio']").each(function () {
            if ($(this).context.checked) {
                a++
            }
        })

        var SelevtIndex = $("#SourceNodeRight").find("select").val()

        if (!$("#SourceNodeRight").find("input").val()=="") {
            if (SelevtIndex != "0") {
                if (a >= $("#SourceNodeRight").find("input[type='radio']").length / 2) {

                    var $AfterHtml = [
                        '<div class="SourceNodeLeftChild ">',
                        '<div class="border-buttom padding-10 ">',
                            '<span class="LeftChild1F padding-left-10 padding-right-10">1</span>',
                            '<input type="text" style="border:0" />',
                            '<span class="fr">',
                                '<i class="glyphicon glyphicon-edit" onclick="EditNodeToRight(this)"></i>&nbsp;',
                                '<i class="glyphicon glyphicon-remove" onclick="NodeMiniRemove(this)"></i>',
                            '</span>',
                        '</div>',
                        '<ul class="margin-left-10 margin-right-10">',
                            '<li class="border-buttom padding-10">',
                                '<span class="padding-right-20">节点名称</span>',
                                '<span style="color:#999999">' + $("#NodeName").val() + '+</span>',
                            '</li>',
                            '<li class="padding-10">',
                                '<span class="padding-right-20">节点类型</span>',
                                '<span>',
                                    '<a class="click_a color-999999">原料节点</a>&nbsp;',
                                    '<a class="click_a color-999999">录入限制</a>&nbsp;',
                                    '<a class="click_a color-999999">多次</a>',
                                '</span>',
                            '</li>',
                        '</ul>',
                    '</div>',
                    ].join("")
                    $("#SourceNodeLeft_").append($AfterHtml)
                    $(".SourceNodeLeftChild:last").find(".click_a").eq(parseInt(SelevtIndex)-1).addClass("active")
                    $("#SourceNodeRight").hide()
                }else{
                    alert("有单选项未选择")
                }
            }else{
                alert("节点类型未选择")
            }
        }else {
            alert("节点配置未填写")
        }
    }

    //删除
    function NodeMiniRemove(_this) {
        var result = confirm('是否删除！');
        if (result) {
            $(_this).parents(".SourceNodeLeftChild").remove()
        }

    }


    //修改人
    function Modifier() {
        if ($("input[name='PermissionPerson'][value=1]").is(":checked")) {
            $("#Modifier").show()
        } else {
            $("#Modifier").hide()
        }

    }
</script>